<template>
  <div class="node " :class="{ flexColumn: (elNode.name == ELNameEnum.IF || elNode.name == ELNameEnum.SWITCH) }"
    @click="clickNode(elNode)">


    <!-- 组件名称 -->
    <div
      :class="{ comTextBorder: elNode.comCss, thenTextBorder: elNode.thenCss, switchTextBorder: elNode.switchCss, ifTextBorder: elNode.ifCss }">
      <div>{{ elNode.displayName }}</div>
      <div class="switchtips">{{ elNode.switchTips }}</div>

    </div>


    <div class="backOperate">
      <button v-if="elNode.name !== ELNameEnum.THEN" @click="deleteNode(elNode)">删除</button>
      <button v-if="elNode.type == ELTypeEnum.idType" @click="setDataInput(elNode)">数据</button>
      <input type="text" v-if="elNode.showDataInput" v-model="elNode.data">
      <button v-if="elNode.name == ELNameEnum.SWITCH" @click="editSwitch(elNode)">修改</button>
    </div>

    <div v-if="elNode.type == ELTypeEnum.idType || elNode.name == ELNameEnum.THEN" class="arrow-line"></div>
    <div v-if="elNode.type == ELTypeEnum.idType || elNode.name == ELNameEnum.THEN" class="arrow-right"></div>

    <!-- <div v-if="elNode.childIsSwitchOrIf" class="pillar"></div> -->

    <!-- 嵌套 -->
    <ELNodeComponent v-for="(item, index) in elNode.child" :el-node="item" @code="showCode($event)">
    </ELNodeComponent>

    <!-- 操作按钮显示逻辑： 开关为false 并且 组件是THEN组件 -->
    <div class="operate" v-if="!elNode.hiddenOperate && elNode.name == ELNameEnum.THEN">
      <div class="con">
        <button @click="addCom(elNode)">添加普通组件</button>
        <button @click="addSwitch(elNode)">添加选择组件</button>
        <button @click="addIf(elNode)">添加判断组件</button>
        <!-- <button @click="hiddenNode(elNode)">隐藏</button> -->
      </div>

    </div>


    <div class="cmp">
      <div class="con" v-if="elNode.showAddCommon">
        <p>普通组件</p>
        <button v-for="(elc, comIndex) in elcArray" @click="comAction(elNode, elc)">{{ elc.displayName }}</button>
      </div>

      <div class="con" v-if="elNode.showAddSwitch">
        <p>选择组件</p>
        <button v-for="(elc, comIndex) in elcSwitchArray" @click="switchAction(elNode, elc)">{{ elc.displayName
        }}</button>

      </div>

      <div class="con" v-if="elNode.showAddIf">
        <p>判断组件</p>
        <button v-for="(elc, comIndex) in elcIfArray" @click="ifAction(elNode, elc)">{{ elc.displayName
        }}</button>

      </div>


    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import ELNodeComponent from './ELNodeComponent.vue'
import { ELNode } from '../ts/ELNode'
import type { LiteFlowComponent } from '../ts/LiteFlowComponent'
import { ELNameEnum, ELTypeEnum } from '../ts/ELEnum'

const emit = defineEmits(['code'])
// 组件入参
defineProps<{
  elNode: ELNode
}>()

//普通组件demo数据，可通过后台接口获取该数据
const comjson = '[{"name":"COM","displayName":"获取信用分组件","nodeId":"getCreditScore"},{"name":"COM","displayName":"获取注册天数","nodeId":"getGhomeDays"},{"name":"COM","displayName":"封禁发布活动","nodeId":"processBanPublicActivity"},{"name":"COM","displayName":"停止走马灯警告","nodeId":"processStopWarning"},{"name":"COM","displayName":"开始走马灯警告","nodeId":"processStartWarning"},{"name":"COM","displayName":"恢复发布活动","nodeId":"processCanPublicActivity"}]'
const elcArray = reactive<Array<LiteFlowComponent>>(
  JSON.parse(comjson)
);
const comAction = (node: ELNode, elc: LiteFlowComponent) => {
  node.showAddCommon = false
  let item: ELNode = new ELNode(ELTypeEnum.idType, "", elc.displayName)
  item.nodeId = elc.nodeId
  item.parent = node
  item.comCss = true
  node.addChild(item)
}

//选择组件demo数据，可通过后台接口获取该数据
const switchJson='[{\"name\":\"SWITCH\",\"displayName\":\"主页创建日选择组件\",\"nodeId\":\"processGhomeDaysSwitch\",\"conditionNodeId\":\"s12\",\"script\":true,\"code\":\"let days = publishActivityRuleContext.getGhomeDays()\\nif(days<1){\\n  return \\\"d1\\\"\\n}else if(days<90){\\n  return \\\"d2\\\"\\n}else{\\n  return \\\"d3\\\"\\n}\\n\",\"child\":[{\"name\":\"THEN\",\"displayName\":\"(注册天数小于1)\",\"aliasNodeId\":\"d1\"},{\"name\":\"THEN\",\"displayName\":\"(注册天数大于等于1小于90)\",\"aliasNodeId\":\"d2\"},{\"name\":\"THEN\",\"displayName\":\"(注册天数大于等于90)\",\"aliasNodeId\":\"d3\"}]},{\"name\":\"SWITCH\",\"displayName\":\"信用分选择组件\",\"nodeId\":\"processCreditSwitch\",\"conditionNodeId\":\"s13\",\"script\":true,\"code\":\"let score = publishActivityRuleContext.getCreditScore()\\nif(score<20){\\n  return \\\"t1\\\"\\n}else if(score<70){\\n  return \\\"t2\\\"\\n}else{\\n  return \\\"t3\\\"\\n}\\n\",\"child\":[{\"name\":\"THEN\",\"displayName\":\"(信用分小于20)\",\"aliasNodeId\":\"t1\"},{\"name\":\"THEN\",\"displayName\":\"(信用分大于等于20小于70)\",\"aliasNodeId\":\"t2\"},{\"name\":\"THEN\",\"displayName\":\"(信用分大于等于70)\",\"aliasNodeId\":\"t3\"}]}]'
const elcSwitchArray = reactive<Array<LiteFlowComponent>>(
  JSON.parse(switchJson)
);
const switchAction = (node: ELNode, elc: LiteFlowComponent) => {
  node.showAddSwitch = false
  node.hiddenOperate = true
  let child: ELNode[] = new Array();
  console.log(elc.child)
  for (let i = 0; i < elc.child.length; i++) {
    const e = elc.child[i];
    let then1 = new ELNode(ELTypeEnum.elType, ELNameEnum.THEN, "选项" + (i + 1))
    then1.switchTips = e.displayName
    then1.thenCss = true
    then1.aliasNodeId = e.aliasNodeId
    child.push(then1)
  }
  let item: ELNode = new ELNode(ELTypeEnum.elType, ELNameEnum.SWITCH, elc.displayName, child)
  node.childIsSwitchOrIf = true
  item.parent = node
  item.nodeId = elc.nodeId
  item.conditionNodeId = elc.conditionNodeId
  item.switchCss = true
  item.code = elc.code
  node.addChild(item)
}


//判断组件demo数据，可通过后台接口获取该数据
const ifJson='[{\"name\":\"IF\",\"displayName\":\"判断是否明星团长\",\"nodeId\":\"processStarGroupIF\",\"conditionNodeId\":\"s14\",\"script\":false,\"child\":[{\"name\":\"THEN\",\"displayName\":\"(是)\",\"aliasNodeId\":\"it1\"},{\"name\":\"THEN\",\"displayName\":\"(否)\",\"aliasNodeId\":\"it2\"}]},{\"name\":\"IF\",\"displayName\":\"判断是否五星售后团长\",\"nodeId\":\"process5AfterSaleGroupIF\",\"conditionNodeId\":\"s15\",\"script\":false,\"child\":[{\"name\":\"THEN\",\"displayName\":\"(是)\",\"aliasNodeId\":\"it3\"},{\"name\":\"THEN\",\"displayName\":\"(否)\",\"aliasNodeId\":\"it4\"}]}]';
const elcIfArray = reactive<Array<LiteFlowComponent>>(
  JSON.parse(ifJson)
);

const ifAction = (node: ELNode, elc: LiteFlowComponent) => {
  node.showAddIf = false
  node.hiddenOperate = true
  let child: ELNode[] = new Array();
  for (let i = 0; i < elc.child.length; i++) {
    const e = elc.child[i];
    let then1 = new ELNode(ELTypeEnum.elType, ELNameEnum.THEN, "判断" + (i + 1))
    then1.switchTips = e.displayName
    then1.thenCss = true
    then1.aliasNodeId = e.aliasNodeId
    child.push(then1)
  }
  let item: ELNode = new ELNode(ELTypeEnum.elType, ELNameEnum.IF, elc.displayName, child)
  node.childIsSwitchOrIf = true
  item.parent = node
  item.conditionNodeId = elc.conditionNodeId
  item.nodeId = elc.nodeId
  item.ifCss = true
  node.addChild(item)
}


//===========================================基本按钮============
const showCode = (e: ELNode) => {
  console.log('子节点', e)
  emit('code', e)
}

const editSwitch = (node: ELNode) => {
  console.log(node)
  console.log('触发点', node.conditionNodeId)
  emit('code', node)
}

//添加普通组件
const addCom = (node: ELNode) => {
  node.showAddCommon = true
  node.showAddSwitch = false
  node.showAddIf = false
}
//添加选择组件
const addSwitch = (node: ELNode) => {


  node.showAddCommon = false
  node.showAddSwitch = true
  node.showAddIf = false
}
//添加判断组件
const addIf = (node: ELNode) => {

  node.showAddCommon = false
  node.showAddSwitch = false
  node.showAddIf = true
}

const clickNode = (node: ELNode) => {
  // node.hiddenOperate = false;
}

const hiddenNode = (node: ELNode) => {
  console.log("click", node)
  node.hiddenOperate = true;
}

const setDataInput = (node: ELNode) => {
  node.showDataInput = true
}
const deleteNode = (node: ELNode) => {
  console.log("click", node)
  let c = node.parent?.child
  if (c == undefined) return
  let j = -1;
  for (let i = 0; i < c.length; i++) {
    const element = c[i];
    if (node === element) {
      j = i
      break
    }
  }
  if (j >= 0) {
    c.splice(j, 1);
    if (node.parent == undefined) return
    node.parent.hiddenOperate = false

    node.parent.childIsSwitchOrIf = false

  }


}


</script>

<style scoped>
.node {
  display: flex;
  /* 默认水平 */
  flex-direction: row;
  /* 不换行 */
  flex-wrap: nowrap;
  /* 定义了项目在主轴(横轴)上的对齐方式 */
  justify-content: center;
  /* 元素在侧轴（纵轴）方向上的对齐方式 */
  align-items: center;

  padding: 0.5vw;
  /* margin-top: 2vh; */
}

.operate {
  display: flex;
  /* 默认水平 */
  flex-direction: row;
  /* 不换行 */
  flex-wrap: nowrap;

}


.flexColumn {
  flex-direction: column;
  align-items: flex-start;
  border-left: 3px solid red;
  padding-left: 1vw;
}

.thenTextBorder {
  /* border: 1px solid green; */
}

.comTextBorder {
  /* border: 1px solid blue; */
}

.ifTextBorder {
  /* border: 1px solid plum; */
}

.switchTextBorder {
  /* border: 1px solid tomato; */
}

.switchtips {
  font-size: 0.1vw;
  color: tomato;
}


.iftip {
  font-size: 0.1vw;
  color: plum;
}

.arrow-right {

  width: 1vw;

  height: 1vw;

  background-color: transparent;
  /* 模块背景为透明 */

  border-color: #f02c57;

  border-style: solid;

  border-width: 3px 3px 0 0;

  /* margin: 300px auto; */

  transform: rotate(45deg);
  /*箭头方向可以自由切换角度*/

}

.arrow-line {
  width: 2vw;
  height: 1vw;
  background-color: transparent;
  border-color: #f02c57;
  border-style: solid;
  border-width: 3px 0 0 0;
  transform: translate(20px, 7px);
  /* transform: translateY(6px); */
}

.cmp {
  display: flex;
  /* 默认水平 */
  flex-direction: row;

  /* 定义了项目在主轴(横轴)上的对齐方式 */
  justify-content: center;
  /* 元素在侧轴（纵轴）方向上的对齐方式 */
  align-items: center;


  /* padding:1 1 1 1; */
  /* border: 1px solid red; */
}

.con {
  display: flex;
  /* 默认水平 */
  flex-direction: column;
  padding-left: 1vh;
  padding-right: 1vh;
}

.backOperate {
  padding-left: 1vw;
}
</style>
